<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>摇一摇活动后台管理</title>
    <style>
        .title{text-align: center;font-size: 100px}
        .p{margin: auto;position: absolute;top: 70%;left: 38%;bottom: 0;right: 0;font-size: 70px }
        img{margin: auto;position: absolute;top: 0;left: 0;bottom: 0;right: 0; }
        p span {color: red;}
        p span.time {color: black}
        .p3{margin: auto;position: absolute;top: 90%;left: 20%;bottom: 0;right: 0;font-size: 70px}
    </style>
    <script src="/plugins/JQuery/jquery.min.js"></script>
    <link href="/plugins/Animate/Animate.css" rel="stylesheet"/>
</head>
<body>
<!--<h1 class="animated infinite bounce delay-2s">Example</h1>-->
<p class="title">请扫描二维码参加活动</p>
<img class="animated shake delay-1s" src="/images/jam.jpg"/>
<p class="p">参加人数：36</p>
<p class="p3">距离活动开始还有:<span></span></p>

</body>
<script>
    var backstageTime;//后台时间
    $(function () {
        getDateTime();
        getMan();
        getDate();
        setInterval(getDate, 1000);
    })

    var oSpan = document.getElementsByTagName('span')[0];
    function tow(n) {
        return n >= 0 && n < 10 ? '0' + n : '' + n;
    }
    function getDate() {
        var oDate = new Date();//获取日期对象
        var oldTime = oDate.getTime();//现在距离1970年的毫秒数
        var newDate = new Date(backstageTime);
        var newTime = newDate.getTime();//2019年距离1970年的毫秒数
        var second = Math.floor((newTime - oldTime) / 1000);//未来时间距离现在的秒数
        var day = Math.floor(second / 86400);//整数部分代表的是天；一天有24*60*60=86400秒 ；
        second = second % 86400;//余数代表剩下的秒数；
        var hour = Math.floor(second / 3600);//整数部分代表小时；
        second %= 3600; //余数代表 剩下的秒数；
        var minute = Math.floor(second / 60);
        second %= 60;
        var str = tow(day) + '<span class="time">天</span>'
            + tow(hour) + '<span class="time">小时</span>'
            + tow(minute) + '<span class="time">分钟</span>'
            + tow(second) + '<span class="time">秒</span>';
        oSpan.innerHTML = str;
    }
    function getMan(){
        var url = "/getManNum.do";
        var param = {};
        $.get(url,param,function (data) {
            if(data.code == 200){
                $('.p').html("参加人数："+data.data);
            }else{
                alert("人数获取失败，请联系管理员")
            }
        })

    }
    function getDateTime(){
        $.get("/getTime.do",function (data) {
            if(data.code == 200){
                backstageTime = data.data;
            }else{
                alert("系统获取时间出错，请联系管理员")
            }
        });
    }

</script>
</html>